<template>
  <div class="banxin RecommendationList">
    <ul>
      <li
        v-for="(item, index) in data"
        :key="index"
        @click="tiaozxiangqing(item.id)"
      >
        <div class="topp">
          <img
            class="imgone"
            v-show="item.isLatest == 1"
            :src="newbiao"
            alt=""
          />
          <img class="imgone" :src="HOT" v-show="item.isHotSale == 1" alt="" />
          <img
            class="imgshsee"
            :src="'http://sc.wolfcode.cn' + item.coverImg"
            alt=""
          />
        </div>
        <div class="botton">
          <p>{{ item.name }}</p>
          <span>{{ item.coin }}积分</span><br />
          <button>立即兑换</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      HOT: require("@/assets/images/home/hot-j.png"),
      newbiao: require("@/assets/images/home/new-j.png"),
    };
  },
  props: ["data"],
  created() {},
  methods: {
    tiaozxiangqing(id) {
      // /products/{id}
      this.$router.push(`/products/${id}`);
    },
  },
};
</script>
 
<style lang = "less" scoped>
@import "@/assets/base.less";
.RecommendationList {
  ul {
    display: flex;
    flex-wrap: wrap;
    /* !  important 增加权重  */
    justify-content: flex-start !important;
    li {
      width: 285px;
      transition: all 0.5s;
      margin-right: 20px;
      margin-bottom: 30px;
      &:nth-child(4n) {
        margin-right: 0;
      }
      .topp {
        position: relative;
        .imgone {
          position: absolute;
        }
        .imgshsee {
          width: 285px;
          height: 250px;
        }
      }
      .botton {
        height: 162px;
        text-align: center;
        color: @blue;
        background: #fff;
        p {
          padding-top: 22px;
          font-size: 20px;
          font-family: SourceHanSansSC;
          color: #333333;
          line-height: 23px;
          text-align: center;
        }
        span {
          font-size: 18px;
          font-family: SourceHanSansSC;
          color: @orange;
          line-height: 39px;
        }
        button {
          width: 100px;
          height: 36px;
          font-size: 18px;
          border: 1px solid @blue;
          margin-top: 16px;
          cursor: pointer;
        }
      }
    }
    li:hover {
      transform: translateY(-20px);
      button {
        background-color: @blue;
        color: #fff;
      }
    }
  }
}
</style>